<template>
    <div flex="main:justify" style="display: flex; justify-content: space-between; ">
        <div class="warp">
            <p flex="main:justify" style="display: flex; justify-content: space-between; " class="title">
                学习
                <span class="iconfont icon icon-jinrujiantou"></span>
            </p>
            <div flex="main:center" style="display: flex; justify-content: center; ">
                <div class="item border">
                    <p class="total" >{{total.studyedCount}}</p>
                    <p class="text">已学课程</p>
                </div>
                <div  class="item">
                    <p class="total_item">
                        <span class="label">全部课程：</span>
                        <span>{{total.totalCourseCount}}个</span></p>
                    <p class="total_item"> <span  class="label">未完成：</span><span>{{total.unFinishCourseCount}}个</span></p>
                </div>
            </div>
        </div>
        <div class="warp">
            <p flex="main:justify" style="display: flex; justify-content: space-between; " class="title">
                作业
                <span class="iconfont icon icon-jinrujiantou"></span>
            </p>
            <div flex="main:center"  style="display: flex; justify-content: center; ">
                <div class="item border">
                    <p class="total" >{{total.unFinishHomeworkCount}}</p>
                    <p class="text">未完成作业</p>
                </div>
                <div  class="item">
                    <p class="total_item item_2" ><span class="label">累计作业：</span><span>{{total.totalHomeworkCount}}个</span></p>
                    <p class="total_item item_2"> <span  class="label">正确率：</span><span>00%</span></p>
                    <p class="total_item item_2"> <span  class="label">错题：</span><span>{{total.unFinishCourseCount}}个</span></p>
                </div>
            </div>
        </div>
        <div class="warp">
            <p flex="main:justify" style="display: flex; justify-content: space-between; " class="title">
                答疑
                <span class="iconfont icon icon-jinrujiantou"></span>
            </p>
            <div flex="main:center" style="display: flex; justify-content: center; " >
                <div class="item border">
                    <p class="total" >{{total.questionCount}}</p>
                    <p class="text">最新答疑</p>
                </div>
                <div  class="item">
                    <p class="total_item item_2"> <span class="label">答疑：</span><span>{{total.unFinishCourseCount}}条</span></p>
                    <p class="total_item item_2"> <span  class="label">已回复：</span><span>{{total.questionAnsweredCount}}条</span></p>
                    <p class="total_item item_2"> <span  class="label">未回复：</span><span>{{total.unFinishCourseCount}}条</span></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    props:{
        total:{
            type:Object,
            default:()=>{
                return{
                    totalCourseCount:0,
                    unFinishCourseCount:0,
                    studyedCount:0,
                    totalHomeworkCount:0,
                    unFinishHomeworkCount:0,
                    questionCount:0,
                    questionAnsweredCount:0,
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.warp{
    width: 240px;
    padding-top: 20px;
}
.text{
    font-size:12px
}
.icon{
    color:#ff5f19;
    font-size:30px;
    
}
.title{
    color: #1a1a1a;
    font-size:22px;
    
}
.item{
    width: 50%;
    text-align: center;
    padding-top:10px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}
.total{
    font-size:32px;
    margin-bottom: 10px;
       color:#ff5f19;
}
.border{
    border: 0;
    border-right: 1px solid #ffefe8
}
p{
    color: #808080;
    font-size:14px;
   line-height:20px;
    span{
        color:#ff5f19;
    }
}
.label{
    display: inline-block;
        color: #808080;
         
        width: 70px;
        text-align:left
}
.total_item{
    margin-top:10px
}
.item_2{
    margin-top: 0 ;
}
</style>